<template>
  <div class="page flex flex-center">
    <div style="width: 80%">
      <div class="flex flex-rc">
        <div class="title title--bg">注册</div>
      </div>

      <div class="container pt-20 pb-20">
        <van-field
          class="mb-20"
          placeholder="请输入父级地址"
          v-model="superiorWalletAddress"
        ></van-field>

        <div class="flex flex-center">
          <div class="btn click flex-fs-0" @click="register">注册</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from '@/store/index'
import { showToast, showError } from 'js/utils'
import api from 'js/api'

const router = useRouter()
const route = useRoute()
const store = useStore()

const superiorWalletAddress = ref(route.query.superiorWalletAddress || '')

if (superiorWalletAddress.value) {
  register()
}

// 注册
async function register() {
  const params = {
    walletAddress: window.fromAddress,
    superiorWalletAddress: superiorWalletAddress.value,
  }

  const { code } = await api.register(params)

  if (code === 200) {
    showToast('注册成功')

    setTimeout(() => {
      router.replace('/login')
    }, 2000)
  } else {
    setTimeout(() => {
      router.replace('/login')
    }, 2000)
  }
}
</script>

<style lang="scss" scoped>
.page {
  background: url('@/assets/img/bg.jpg') no-repeat center / cover;
}
</style>
